<template>
  <el-row class="section">
    <el-col :span="6" class="organization-padd">
      <el-col :span="24">
            <el-tree
              style="marginTop:10px;min-height:calc(100vh - 120px);border-radius: 10px;"
              :data="content"
              :props="defaultProps"
              @node-click="handleClick"
              node-key="id"
               :default-expanded-keys="[2]"
              :expand-on-click-node="false">
              <div class="node" slot-scope="{ node, data }">
                <div>{{node.label}}</div>
                <!-- <span class='custom-tree-title' style="text-align:left;"></span> -->
                <el-select v-if="nodeCurr.id == data.id" v-model="treeValue" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                </el-select>
              </div>
          </el-tree>
      </el-col>
    </el-col> 
    <el-col :span="18">
      <el-form :inline="true" :model="formSelect" class="formSection-flex">
        <el-form-item label="模板名称">
          <el-input v-model="formSelect.name" placeholder="模板名称"></el-input>
        </el-form-item>
        <el-form-item label="查询">
           <el-select v-model="formSelect.statusValue" placeholder="请选择启用/禁用">
              <el-option
                v-for="item in statusSeclet"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
   <el-form-item label="新版本">
    
         <span style=" display: inline-block;
  width: 30px;
  height: 30px;
  background:#65da8a;"></span>
     
             </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="handelSeach">查询</el-button>
          <el-button type="primary" @click="()=>{formSelect.name = '',formSelect.statusValue='',tabData = [],tplIndex()}">重置</el-button>
          <el-button type="primary" @click="addHtml">新增</el-button>
        </el-form-item> -->
      </el-form>
      <el-col :span="24" class="formList">
        <FromList :tableTitle="tableTitle" @handleEdit="handleEdit"  :tableData="tableData" style='border-radius: 10px;'  />
      <el-pagination
           class="fenye"
            :background="true"
            :current-page="paramsList.page"
            :page-size="paramsList.limit"
          
            layout="prev, pager, next"
            @current-change="handlePagination"
            :total="paramsList.pageCount">
            </el-pagination>
      </el-col>
     
    </el-col>
    <el-dialog
      :title="type == 1 ? '新增' : type == 2 ? '编辑' : ''"
      :visible.sync="addVisible"
      width="50%"
      :before-close="handleClose">
      <span>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="分类名称">
          <el-input v-model="formInline.name" placeholder="分类名称"></el-input>
        </el-form-item>
        <el-form-item label="上级分类" v-if="type == 1">
           <el-input v-model="nodeCurr.name" disabled></el-input>
        </el-form-item>
      </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClick()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="typeForm == 1 ? '新增' : typeForm == 2 ? '编辑' : ''"
      :visible.sync="typeFlag"
      width="50%"
      :before-close="handleClose">
      <span>
      <el-form :inline="true" :model="formHtml" class="demo-form-inline">
        <el-form-item label="模板名称">
          <el-input v-model="formHtml.name" placeholder="模板名称"></el-input>
        </el-form-item>
        <el-form-item label="模板分类" v-if="type == 1">
           <el-input v-model="nodeCurr.name" disabled></el-input>
        </el-form-item>
      </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="typeFlag = false">取 消</el-button>
        <el-button type="primary" @click="nativeHtml">确 定</el-button>
      </span>
    </el-dialog>
  
  </el-row>
</template>

<script>
import {categoryIndex,categorySave,tplIndex} from "@/api/caseList"
import {readHospitalMemberDetail} from "@/api/zhuyanre"

import iframeDemo from "@/components/iframeDemo/index.vue"
import FromList from "@/forComponents/fromList/fromList"
import {iframeUrl} from "@/utils/server.js"
let that
export default {
  props:['id'],
  data(){
    return {
       paramsList:{
        page:1,
        limit:10,
        pageCount:0,
      },
      tableTitle:[
         {
          prop:"name",
          name:"模板病例名称",
          type:1,
          width:200,
        },
        {
          prop:"sex",
          name:"使用科室",
          type:1,
        },
          {
          prop:"is_new",
          name:"版本",
          type:1,
        },
        {
          prop:"updated_at",
          name:"更新时间",
          type:1,
          width:200,
        },
          {
          prop:"guoji",
          name:"更新人",
          type:1,
        },
        //  {
        //   prop:"status",
        //   name:"启用状态",
        //   type:5,
        // },
        {
          prop:"memberNature",
          name:"操作",
          type:4,
          arr:[
            {
              type:"primary",
              number:1,
              name:"选择"
            },
           
          ],
          width:300,
          // fixed:"right"
        },
      ],
      tableData:[],
      data:[
       
      ],
      content:[],
      height:"0",
      url:`http://localhost:8080/#/caseList2?id=1&token=${localStorage.getItem("token")}`,
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf:"isLeaf"
      },
      nodeCurr:{},
      treeValue:"",
      options:[
        {
          label:"新增下级部门",
          value:"1"
        },
        {
          label:"编辑",
          value:"2"
        }
      ],
      addVisible:false,
      type:1,
      formInline:{
        name:""
      },
      formSelect:{
        name:"",
        statusValue:""
      },
      statusSeclet:[
        {
          label:"启用",
          value:1
        },
        {
          label:"禁用",
          value:2
        }
      ],
      typeFlag:false,
      typeForm:1,
      formHtml:{
        name:"",
        use_dept:"",
        id:"",
      },
      iframeFlag:false,
      overUrl:"",
     username:'',
     ipt_no:'',
      
    }
  },
  watch:{
    treeValue(to){
      if(to == 1){
        this.addVisible = true
        this.type = 1
      }else if(to == 2){
        this.addVisible = true
        this.type = 2
        this.formInline.name = this.nodeCurr.name
      }
    }
  },
  mounted(){
    that = this
    readHospitalMemberDetail({id:this.id}).then(res=>{
          var objdata={}
        Object.assign(objdata, res.data.masterInfo, res.data.nodeInfo,res.data.member);
        this.username=objdata.name
        this.ipt_no=objdata.ipt_no
    })
    // this.height = (document.body.offsetHeight - 200) + "px"
    this.categoryIndex()
  },
  methods:{
      handlePagination(e){
      
         this.paramsList.page=e;
       
            this.tplIndex()
       
        
    },
    // 操作按钮点击
    handleEdit(e){
      console.log(e)
      switch(e.key){
        case 1:
          this.$emit('opencompile',e.data)
          // this.$router.push("/workstation/compile")
        break
        case 2:
          this.typeFlag = true
          this.typeForm = 2
          this.formHtml.name = e.data.name
          this.formHtml.id = e.data.id
        break
        case 3:
          this.iframeFlag = true
          this.overUrl = `${iframeUrl}/#/over?id=${e.data.id}`
          setTimeout(function(){
             that.$nextTick(function(){
              let json = {
                id:e.data.id
              };
              this.$refs.iframeDemo.handleEmit(json)
            })
          },100)
         
        break
      }
    },
    // 跳转新增
    nativeHtml(){
      if(this.formHtml.name == ''){
        this.$message.error('请输入模板名称');
        return false
      }
      let data = {
        name:this.formHtml.name,
        category_id:this.nodeCurr.id,
        type:this.typeForm,
        
      }
      if(data.type == 2){
         data.id = this.formHtml.id
      }
      data = JSON.stringify(data)
      localStorage.setItem("formHtml",data)
      this.$router.push("/admin/compile")
    },
    // 添加编辑模板分类
    addClick(){
      let data = {
        name:this.formInline.name,
      }
      if(this.type == 1){
        data.pid = this.nodeCurr.id
      }else{
        data.id = this.nodeCurr.id
      }
       categorySave({...data})
       .then(res=>{
         this.addVisible = false
         this.$set(this.formInline,"name","")
         this.$message({
          message:this.type == 1 ? '添加成功' : this.type == 2 ? '编辑成功' : '',
          type: 'success'
        });
        this.categoryIndex()
       })
       .catch(e=>{
        this.$message({
          message:e.message,
          type: 'error'
        });
       })
    },
    tplIndex(){
      tplIndex({page:this.paramsList.page,limit:this.paramsList.limit,category_id:this.nodeCurr.id,keyword:this.formSelect.name,status:1})
      .then(res=>{
        console.log(res)
        if(res.data.length == 0){
          return false
        }
        this.tableData = res.data.list
         this.paramsList.pageCount=res.data.count;
      })
      .catch(e=>{
        this.$message({
          message:e.message,
          type: 'error'
        });
      })
    },
    addHtml(){
      this.typeFlag = true
      this.typeForm = 1
    },
    handleClose(){
      this.addVisible = false
      this.typeFlag = false
      this.$set(this.formInline,"name","")
      this.treeValue = ""
    },
    clickUrl(){
     console.log("进入")
     this.url = `http://localhost:8080/#/caseList?id=2&token=${localStorage.getItem("token")}`
    },
    // 左边组织机构点击
    handleClick(e){
      this.nodeCurr = e
      this.paramsList.page=1
      this.tplIndex()
      
      this.tableData = []
      this.treeValue = ""
    },
    // 获取左边组织框架
    categoryIndex(){
      categoryIndex({status:1,user_for:1})
      .then(res=>{
        console.log(res)
        if(res.data.length == 0){
          return false
        }
        this.content = res.data
        this.nodeCurr = res.data[0]
        this.tplIndex()
      })
      .catch(e=>{
        this.$message({
          message:e.message,
          type: 'error'
        });
      })
    },
    // 点击查询
    handelSeach(){
      this.tableData = []
      this.tplIndex()
    },
    handleNodeClick(id){
      
    }
  },
  components:{
    iframeDemo,
    FromList
  }
}
</script>

<style lang="scss" scoped>
@import "./index.scss";

.organization-padd{
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 10px;
    min-height:calc(100vh - 90px)
  }

  .buttom{
    text-align: right;
    margin-top:20px;
    margin-bottom: 20px;
  }

  .pd-20{
    padding:0px 20px;
    box-sizing: border-box;
  }  
  >>> .el-tree-node__content {

    height:40px;
    display: flex !important;
    flex-wrap: wrap;
    justify-content:flex-start;
  }
  .node >>> .el-select .el-input__inner{
    height:30px;
    
  }
  .node >>> .el-select{
    width: 100px;
    line-height: 30px;
    height: 30px;
    // margin-left: 50px;
    margin-left: auto;
  }


  .custom-tree-title{
    display: inline-block;
    height: 30px;
  }
  
  >>> .el-input__icon {
    line-height: 30px;
  }
  .section-content{
    height: calc(100vh - 90px);
    display: flex;
    
  }

  .node{
    width: 90%;
    display: flex;
    line-height: 30px;
  }

  .flexBetween{
    display: flex;
    justify-content: space-between;
  }

  .scrool{
    overflow-y: scroll;
    height:500px;
    display: block;
  }
  
</style>